<template>
  <h3>description 页面: query，params使用</h3>
  <div class="border" v-if="isQuery">
    <p class="green">params:</p>
    <div>
      {{ id }}
    </div>
    <div>
      {{ name }}
    </div>
    <div>
      {{ content }}
    </div>
  </div>

  <div class="border" v-else>
    <p class="green">query：</p>
    <div>
      {{ query.id }}
    </div>
    <div>
      {{ query.name }}
    </div>
    <div>
      {{ query.content }}
    </div>
  </div>
</template>

<script setup lang="ts">
/* 方法一 */
import { useRoute } from 'vue-router'
import { toRefs, computed } from 'vue'
let route = useRoute()
let { params, query } = toRefs(route)
console.log('useRoute---', params, query.value)

/* 方法二 */
defineProps(['id', 'name', 'content'])

let isQuery = computed(() => {
  return Object.keys(query.value).length == 0
})
</script>

<style lang="scss" scoped></style>
